--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit 65ca9ddc823fcc2c8f8653c553b944b85db0875f
Parents : fa46dc4
Author : Ivan <e46112d44649266d71fe2193e00a4710>
Signature : T66BB85Valid, signed by author
Date : 2026-07-24T06:54:11-05:00
refactor: update UI components in ConversationViewer and AddAudioButton for improved layout and styling
Changes
3 files changed, 41 insertions(+), 43 deletions(-)
Diff
diff --git a/meshchatx.rsm b/meshchatx.rsm
index 7a8fc6cd..7493b699 100644
Binary files a/meshchatx.rsm and b/meshchatx.rsm differ
diff --git a/meshchatx/src/frontend/components/messages/ConversationViewer.vue b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
index adead7e3..fdd13b1b 100644
--- a/meshchatx/src/frontend/components/messages/ConversationViewer.vue
+++ b/meshchatx/src/frontend/components/messages/ConversationViewer.vue
@@ -469,7 +469,7 @@
ref="message-input"
v-model="newMessageText"
:readonly="isTranslatingMessage"
- class="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 text-gray-900 dark:text-zinc-100 text-sm rounded-xl focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 block w-full min-w-0 pl-3 sm:pl-4 pr-[76px] py-2.5 resize-none shadow-xs transition-all placeholder:text-gray-400 dark:placeholder:text-zinc-500 min-h-[44px] max-h-[200px] overflow-y-auto leading-snug"
+ class="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 text-gray-900 dark:text-zinc-100 text-sm rounded-xl focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 block w-full min-w-0 pl-3 sm:pl-4 pr-16 py-2.5 resize-none shadow-xs transition-all placeholder:text-gray-400 dark:placeholder:text-zinc-500 min-h-[44px] max-h-[200px] overflow-y-auto leading-snug"
rows="1"
spellcheck="true"
:placeholder="composeInputPlaceholder"
@@ -477,7 +477,7 @@
@keydown.enter.shift.exact.prevent="onShiftEnterPressed"
@paste="onMessagePaste"
></textarea>
- <div class="absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+ <div class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0">
<AddAudioButton
:is-recording-audio-attachment="isRecordingAudioAttachment"
@start-recording="startRecordingAudioAttachment($event)"
@@ -493,7 +493,7 @@
</AddAudioButton>
<button
type="button"
- class="inline-flex items-center justify-center rounded-lg min-h-[44px] min-w-[44px] p-1.5 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-800 dark:hover:text-zinc-100 transition-colors"
+ class="inline-flex shrink-0 items-center justify-center rounded-lg size-8 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-800 dark:hover:text-zinc-100 transition-colors"
:title="$t('stickers.picker_tooltip')"
@click.stop="toggleStickerPicker"
>
diff --git a/meshchatx/src/frontend/components/messages/composer/AddAudioButton.vue b/meshchatx/src/frontend/components/messages/composer/AddAudioButton.vue
index ec702a44..701cdb0f 100644
--- a/meshchatx/src/frontend/components/messages/composer/AddAudioButton.vue
+++ b/meshchatx/src/frontend/components/messages/composer/AddAudioButton.vue
@@ -1,7 +1,7 @@
<!-- SPDX-License-Identifier: 0BSD AND MIT -->
<template>
- <div class="inline-flex">
+ <div class="relative inline-flex shrink-0">
<button
v-if="isRecordingAudioAttachment"
type="button"
@@ -17,52 +17,50 @@
<button
v-else
type="button"
- class="my-auto inline-flex items-center justify-center rounded-lg min-h-[44px] min-w-[44px] p-1.5 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-800 dark:hover:text-zinc-100 transition-colors"
+ class="my-auto inline-flex items-center justify-center rounded-lg size-8 text-gray-500 dark:text-zinc-400 hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-800 dark:hover:text-zinc-100 transition-colors"
@click="showMenu"
>
<MaterialDesignIcon icon-name="microphone-plus" class="w-5 h-5" />
</button>
- <div class="relative block">
- <Transition
- enter-active-class="transition ease-out duration-100"
- enter-from-class="transform opacity-0 scale-95"
- enter-to-class="transform opacity-100 scale-100"
- leave-active-class="transition ease-in duration-75"
- leave-from-class="transform opacity-100 scale-100"
- leave-to-class="transform opacity-0 scale-95"
+ <Transition
+ enter-active-class="transition ease-out duration-100"
+ enter-from-class="transform opacity-0 scale-95"
+ enter-to-class="transform opacity-100 scale-100"
+ leave-active-class="transition ease-in duration-75"
+ leave-from-class="transform opacity-100 scale-100"
+ leave-to-class="transform opacity-0 scale-95"
+ >
+ <div
+ v-if="isShowingMenu"
+ v-click-outside="hideMenu"
+ class="absolute bottom-full right-0 z-10 mb-2 max-w-[min(20rem,calc(100vw-1.5rem))] rounded-xl bg-white dark:bg-zinc-900 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 focus:outline-hidden"
>
- <div
- v-if="isShowingMenu"
- v-click-outside="hideMenu"
- class="absolute bottom-full right-0 z-10 mb-2 max-w-[min(20rem,calc(100vw-1.5rem))] rounded-xl bg-white dark:bg-zinc-900 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 focus:outline-hidden"
- >
- <div class="py-1">
- <button
- type="button"
- class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
- @click="startRecordingCodec2('1200')"
- >
- Low Quality - Codec2 (1200)
- </button>
- <button
- type="button"
- class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
- @click="startRecordingCodec2('3200')"
- >
- Medium Quality - Codec2 (3200)
- </button>
- <button
- type="button"
- class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
- @click="startRecordingOpus()"
- >
- High Quality - OPUS
- </button>
- </div>
+ <div class="py-1">
+ <button
+ type="button"
+ class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
+ @click="startRecordingCodec2('1200')"
+ >
+ Low Quality - Codec2 (1200)
+ </button>
+ <button
+ type="button"
+ class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
+ @click="startRecordingCodec2('3200')"
+ >
+ Medium Quality - Codec2 (3200)
+ </button>
+ <button
+ type="button"
+ class="w-full block text-left px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 whitespace-nowrap"
+ @click="startRecordingOpus()"
+ >
+ High Quality - OPUS
+ </button>
</div>
- </Transition>
- </div>
+ </div>
+ </Transition>
</div>
</template>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────